<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%String ctx = request.getContextPath();%>
<title>do exam</title>
</head>

<script>
	let currNum = Number(${CurrQueNum})
	let cNmu = Number(${CQuestionsNum})
	let mNmu = Number(${MQuestionsNum})
	let jNmu = Number(${JQuestionsNum})
	let dNmu = Number(${DQuestionsNum})

	$(document).ready(function(){
		if($("#editormd-id").val() !== undefined) {
			editormd("editormd-id", {
				syncScrolling: "single",
				path: "<%=ctx%>/js/lib/",
				saveHTMLToTextarea: true,
				placeholder:"在这里做答，右侧为预览",
			})
		}
		if('${CurrentAnswer.type}' === 'C' || '${CurrentAnswer.type}' === 'J') {
			$('#question input[type="radio"]').each(function() {
				if($(this).prop('value') === "${CurrentAnswer.content}") {
					$(this).prop('checked', 'checked')
				}
			});
		} else if('${CurrentAnswer.type}' === 'M') {
			let ans = "${CurrentAnswer.content}"
			$('#question input[type="checkbox"]').each(function() {
				if(ans.includes($(this).prop('value'))) {
					$(this).prop('checked', 'checked')
				}
			});
		} else if('${CurrentAnswer.type}' === 'D') {
			<%--$('#question textarea[name="markdown-text"]').html("${CurrentAnswer.content}")--%>
			<%--$('#question textarea[name="html-text"]').html("${CurrentAnswer.content}")--%>
			$('#question textarea[name="markdown-text"]').html("${CurrentAnswer.content}")

			<%--const editor = editormd("editormd-id", {saveHTMLToTextarea: true});--%>
			<%--editor.html("${CurrentAnswer.content}")--%>
		}

		document.querySelectorAll('input[type="radio"]').forEach(radio => {
			radio.addEventListener('change', function(event) {
				uploadCurrent(currNum)
			});
		});
		document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
			checkbox.addEventListener('change', function(event) {
				uploadCurrent(currNum)
			});
		});

	});

	function getQuestion(num) {
		uploadCurrent(currNum)
		$.ajax(
				{
					type:"GET",
					url: '<%=ctx%>/u/exam?act=getQuestion',
					dataType: "json",
					data: {
						"value": num
					},
					success: function(data, status) {;
						if(data.length > 0) {
							alert(data);
						}
						AjaxLoad('<%=ctx%>/u/ctrl?act=doExam');
					},
					error: function(req, status, msg) {
						alert(msg);
					}
				}
		)
	}

	function changeQuestion(val) {
		uploadCurrent(currNum)
		currNum += val
		if(currNum === 0) {
			currNum = 1
		} else if(currNum > cNmu+mNmu+jNmu+dNmu) {
			currNum = cNmu+mNmu+jNmu+dNmu
		}
		$.ajax(
				{
					type:"GET",
					url: '<%=ctx%>/u/exam?act=nextQuestion',
					dataType: "json",
					data: {
						"value": val
					},
					success: function(data, status) {;
						if(data.length > 0) {
							alert(data);
						}
						AjaxLoad('<%=ctx%>/u/ctrl?act=doExam');
					},
				  	error: function(req, status, msg) {
					 	alert(msg);
				  	}
				}
			)
	}
	
	function uploadCurrent(num) {

		let type = "C"
		if(num > cNmu && num <= (cNmu+mNmu)) {
			type = "M"
		} else if(num > (cNmu+mNmu) && num <= (cNmu+mNmu+jNmu)) {
			type = "J"
		} else if(num > (cNmu+mNmu+jNmu) && num <= (cNmu+mNmu+jNmu+dNmu)) {
			type = "D"
		}
		let content = ""
		if(type === "C" || type === "J") {
			content = $('#question input:radio:checked').val();
		} else if(type === "M") {
			$('#question input[type="checkbox"]').each(function() {
				if($(this).prop('checked')) {
					content += $(this).prop('value') + ";"
				}
			});
		} else if(type === "D") {
			content = $('#question textarea[name="markdown-text"]').val();
		}
		if(content === undefined) {
			content = ""
		}

		$.ajax(
				{
					type:"GET",
					url: '<%=ctx%>/u/exam?act=saveAnswer',
					dataType: "json",
					data: {
						"value": num,
						"type": type,
						"content": content,
					},
					success: function(data, status) {
						if(data.length > 0) {
							alert(data);
						}
						AjaxLoad('<%=ctx%>/u/ctrl?act=doExam');
					},
					error: function(req, status, msg) {
						alert(msg);
					}
				}
		)
	}

</script>



<body>
<div class="container">

	<div class="row" style="height: 3vh; margin-top: 30px">
		<c:if test="${CQuestionsNum gt 0}">
			单选:
		</c:if>
		<c:forEach var="i" begin="1" end="${CQuestionsNum}">
			<c:choose>
				<c:when test="${CurrQueNum eq i}">
					<button type="button" class="btn btn-success" onclick="getQuestion(${i})">${i}</button>
				</c:when>
				<c:otherwise>
					<button type="button" class="btn" onclick="getQuestion(${i})">${i}</button>
				</c:otherwise>
			</c:choose>
		</c:forEach>
	</div>
<p/>
	<div class="row" style="height: 3vh;">
		<c:if test="${MQuestionsNum gt 0}">
			多选:
		</c:if>
		<c:forEach var="i" begin="${CQuestionsNum + 1}" end="${CQuestionsNum + MQuestionsNum}">
			<c:choose>
				<c:when test="${CurrQueNum eq i}">
					<button type="button" class="btn btn-success" onclick="getQuestion(${i})">${i}</button>
				</c:when>
				<c:otherwise>
					<button type="button" class="btn" onclick="getQuestion(${i})">${i}</button>
				</c:otherwise>
			</c:choose>
		</c:forEach>
	</div>
<p/>
	<div class="row" style="height: 3vh;">
		<c:if test="${JQuestionsNum gt 0}">
			判断:
		</c:if>
		<c:forEach var="i" begin="${CQuestionsNum + MQuestionsNum + 1}" end="${CQuestionsNum + MQuestionsNum + JQuestionsNum}">
			<c:choose>
				<c:when test="${CurrQueNum eq i}">
					<button type="button" class="btn btn-success" onclick="getQuestion(${i})">${i}</button>
				</c:when>
				<c:otherwise>
					<button type="button" class="btn" onclick="getQuestion(${i})">${i}</button>
				</c:otherwise>
			</c:choose>
		</c:forEach>
	</div>
<p/>
	<div class="row" style="height: 3vh;">
		<c:if test="${DQuestionsNum gt 0}">
			简答:
		</c:if>
		<c:forEach var="i" begin="${CQuestionsNum + MQuestionsNum + JQuestionsNum + 1}" end="${CQuestionsNum + MQuestionsNum + JQuestionsNum + DQuestionsNum}">
			<c:choose>
				<c:when test="${CurrQueNum eq i}">
					<button type="button" class="btn btn-success" onclick="getQuestion(${i})">${i}</button>
				</c:when>
				<c:otherwise>
					<button type="button" class="btn" onclick="getQuestion(${i})">${i}</button>
				</c:otherwise>
			</c:choose>
		</c:forEach>
	</div>
	<c:if test="${CQuestionsNum+JQuestionsNum+DQuestionsNum eq 0}">
		<h4>${Msg}</h4>
	</c:if>
<p/>
	<div class="row" style="height: 3vh;"/>

	<div class="row">
		<h3>${Question.content}</h3>
		<hr>
	</div>

	<div class="row" style="height: 60vh" id="question">
		<c:if test="${Type eq 'C'}">
			<c:forEach items="${ItemVoList}" var="Item">
				<label class="btn">
					<input type="radio" name="C" value="${Item.alpha}"> <b style="font-size: large">${Item.alpha}.</b> ${Item.content}
				</label>
				<p/>
			</c:forEach>
		</c:if>
		<c:if test="${Type eq 'M'}">
			<c:forEach items="${ItemVoList}" var="Item">
				<label class="btn">
					<input type="checkbox" name="M" value="${Item.alpha}"> <b style="font-size: large">${Item.alpha}.</b> ${Item.content}
				</label>
				<p/>
			</c:forEach>
		</c:if>

		<c:if test="${Type eq 'J'}">
			<label class="btn">
				<input type="radio" name="J" value="TRUE"> 对
			</label>
			&nbsp;&nbsp;&nbsp;
			<label class="btn">
				<input type="radio" name="J" value="FALSE"> 错
			</label>
		</c:if>

		<c:if test="${Type eq 'D'}">
			<div class="editormd" id="editormd-id" style="height: 100%;width: 100%">
				<textarea class="editormd-markdown-textarea" name="markdown-text" id="markdown-text-id" rows="5"></textarea>
				<textarea class="editormd-html-textarea" name="html-text"></textarea>
			</div>
		</c:if>

	</div>
	<p/>
	<p/>
	<p/>

	<div class="col-md-10 col-xs-12">
		<c:if test="${CQuestionsNum+JQuestionsNum+DQuestionsNum gt 0}">
			<button type="button" class="btn btn-primary" onclick="changeQuestion(-1)">
				上一题</button>
			&nbsp;&nbsp;&nbsp;
			<button type="button" class="btn btn-success" onclick="changeQuestion(1)">
				下一题</button>
		</c:if>
	</div>
	
</div>



</body>
</html>